<script setup>
import LightHeader from "@/components/LightHeader.vue";
import LightFooter from "@/components/LightFooter.vue";
import { reactive, ref, onMounted,onUnmounted } from 'vue';
onMounted(()=>{
    window.scrollTo(0, 0);
})
</script>

<template>
    <div class="wrap">
        <!-- 导航栏 -->
        <el-affix :offset="0">
            <LightHeader />
        </el-affix>
        <header>
            <div class="banner">
                <h2>我们是一家专注于提供高性能、可靠稳定的算力服务的公司</h2>
                <p>云智算AI平台由湖南云智算科技有限公司携手光明网于23年11月共同研发建立，目前已经具备2000P算力集<br>群 ，24年总规划算力50000P集群，均由A100、H100及少量A10组成</p>
            </div>

        </header>
        <main>
            <!-- 使命和愿景 -->
            <div class="mission" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>使命和愿景</h3>
                </div>
                <div class="content">
                    <div class="stepOne">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/Group3193.png" alt="#">
                        </div>
                        <div class="msg">
                            <div class="iconBox">
                                <img src="@/assets/images/newImg/Group3420.png" alt="企业愿景">
                            </div>
                            <p>让智能算力真正普惠化, 让需要的人能以购买沙子<br>的价格来购买智能算力</p>
                        </div>
                    </div>
                    <div class="stepTwo">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/Frame359.png" alt="#">
                        </div>
                        <div class="msg">
                            <div class="iconBox">
                                <img src="@/assets/images/newImg/Group3419.png" alt="我们的使命">
                            </div>
                            <p>以英伟达主流算力过渡，融合并带动国产算力的<br>崛起，做国产芯片算力的“摆渡人”</p>
                        </div>
                    </div>
                </div>
                <div class="cooperateLogo" data-aos="fade-up" data-aos-delay="300">
                    <img src="@/assets/images/newImg/Frame49.png" alt="合作伙伴">
                </div>
            </div>
            <!-- 联系我们 -->
            <div class="contactUs" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>联系我们</h3>
                </div>
                <div class="content">
                    <div class="map">
                        <img src="@/assets/images/newImg/Rectangle94.png" alt="#">
                    </div>
                    <div class="contacts">
                        <div class="top">
                            <ul>
                                <li>
                                    <el-icon>
                                        <Phone />
                                    </el-icon>
                                    <p>服务热线：400-808-9975</p>
                                </li>
                                <li>
                                    <el-icon>
                                        <Message />
                                    </el-icon>
                                    <p>电子邮箱：yunyun@a100-cn.com</p>
                                </li>
                                <li>
                                    <el-icon>
                                        <LocationInformation />
                                    </el-icon>
                                    <p>公司地址：湖南省长沙市岳麓区青山路662号芯城科技园二期2栋A区4楼401</p>
                                </li>
                            </ul>
                        </div>
                        <div class="bottom">
                            <p>关注公众号，了解更多公司信息</p>
                            <div class="qrCode">
                                <div class="imgBox">
                                    <img src="@/assets/images/newImg/Maskgroup.png" alt="code">
                                    <p>添加官方微信领优惠</p>
                                </div>
                                <div class="imgBox">
                                    <img src="@/assets/images/newImg/Maskgroup.png" alt="code">
                                    <p>关注企业公众号</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="lightFooter" data-aos="fade-up" data-aos-delay="300">
                <LightFooter></LightFooter>
            </div>
        </footer>
    </div>
</template>

<style lang="scss" scoped>
@media (max-width: 768px) {
    header {
        width: 1400px !important;
    }
}
.wrap {
    width: 100%;

    header {
        width: 100%;
        overflow: hidden;
        background: url(@/assets/images/newImg/about.png)no-repeat center center/cover;
        padding: 140px 0;
        box-sizing: border-box;

        .banner {
            width: 1400px;
            margin: 0 auto;

            h2 {
                font-weight: 800;
                font-size: 24px;
                line-height: 50px;
            }

            p {
                font-size: 14px;
                color: #576373;
                margin-top: 30px;
                line-height: 28px;
            }
        }
    }

    main {
        width: 1400px;
        margin: 0 auto;

        .mission {
            width: 100%;
            margin-top: 80px;

            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .content {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 60px;

                .stepOne,
                .stepTwo {
                    width: 680px;
                    .imgBox {}

                    .msg {
                        display: flex;
                        align-items: center;
                        border: 1px dashed #a0a0a0;
                        line-height: 28px;
                        .iconBox {
                            margin: 0 20px;
                        }
                    }
                }
            }

            .cooperateLogo {
                margin-top: 10px;
            }
        }

        .contactUs {
            width: 100%;
            margin-top: 80px;

            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .content {
                display: flex;
                justify-content: space-between;
                margin-top: 60px;

                .map {
                    width: 640px;
                }

                .contacts {
                    width: 740px;
                    height: 402px;
                    overflow: hidden;
                    background: url(@/assets/images/newImg/Frame333.png)no-repeat center center/cover;
                    border: 1px dashed #a0a0a0;
                    padding: 30px;
                    box-sizing: border-box;

                    .top {
                        padding-bottom: 20px;
                        border-bottom: 1px dashed #a0a0a0;

                        ul {
                            li {
                                display: flex;
                                font-size: 18px;
                                color: #16191D;
                                margin-bottom: 30px;

                                p {
                                    margin-left: 15px;
                                }
                            }
                        }

                    }

                    .bottom {
                        font-size: 18px;
                        color: #16191D;
                        margin-top: 30px;

                        .qrCode {
                            display: flex;
                            margin-top: 30px;
                            box-sizing: border-box;
                            line-height: 28px;

                            .imgBox {
                                margin-right: 60px;
                                text-align: center;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }

    footer {
        width: 100%;
        margin-top: 70px;
    }

}
</style>